<template>
	<view class="page-wrapper">
		<tabbar :tabbar="tabbar"></tabbar>
		<userinfo id="user" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserinfo"></userinfo>

		<view class="container">
			<view class="my-account" :style="'background-color:' + ( mobile_head_color ? mobile_head_color : '#06c1ae' )">
				<view class="avatar_box">
					<image class="avater" :src="userInfo.avatar"></image>
				</view>
				<view class="user-info">
					<view class="name-box">
						<view class="uname">{{userInfo.nickname}}</view>
						<view class="set_up" @click.stop="go_myinfo">
							<image src="https://hf.pigcms.com/tpl/Wap/pure/static/images/new_my/set_up.png"></image>
						</view>
					</view>
					<view class="umoney phone">
						<text v-if="userInfo.showPhone && userInfo.showPhone!=''">{{ userInfo.showPhone }}</text>
						<view v-else class="block-in" @click.stop="go_newnumber" key="go_newnumber">
							<lang keywords="未绑定手机号码" class="noPhone" ></lang>
						</view>
						<block v-if="myPageInfo.user && myPageInfo.user.sign_get_score > 0">
							<lang v-if="myPageInfo.user.sign_today == 1" keywords="已签到" class="qiandao"></lang>
							<view v-else class="block-in" @click.stop="goUrl($event)" data-url="url/My/sign" data-url_title="签到" key="my_sign">
								<lang  keywords="未签到" class="qiandao" ></lang>
							</view>
							
						</block>
					</view>
					<view class="bind-qiye" v-if="myPageInfo.open_company_advance_deposit == 1 && myPageInfo.bind_company == 0">
						<lang keywords="未绑定企业"></lang>
					</view>
				</view>
			</view>
			
			<view class="money bd-radius">
				<view :class="'my_detail clearfix ' + (text==''?'':'tjt-cells rel ')" style="padding:0px;">
			
					<view class="item" style="width:33.3333%;margin-top:0px;padding:24rpx 0rpx 10rpx 0rpx;" v-for="(item, index) in myPageInfo.user_link_arr"
					 :key="index">
						<view class="big_words">{{item.value}}</view>
						<view class="words">{{ item.name}}</view>
						<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.name ">
							<button formType="submit" class="formidBtn"></button>
						</form>
					</view>
				</view>
			
				<view class="example " v-if="text!=''">
					<view style="position:absolute;left:10px;z-index:100;background-size: 14px; padding-left: 10px;background:#fff;width:30px;height:30px">
						<view style="height:100%;overflow:hidden">
							<image :src="myPageInfo.scroll_image" style="width:20px;height:16px;padding-top:7px"></image>
						</view>
					</view>
					<view class="marquee_box" :style="'width:' + (windowWidth-55) + 'px;height:30px;overflow:' + hidden">
						<view class="marquee_text" :style="orientation + ':' + marqueeDistance2 + 'px;font-size: ' + size + 'px'">
							<text class="every" style="white-space:pre;font-size: 12px;">{{text}}</text>
						</view>
					</view>
				</view>
			</view>
						

			<view style="margin: 0 10px">
				<view class="my_item bd-radius" v-if="myPageInfo.order">
					<view class="my_title tjt-cells rel">
						<view>
							<lang keywords="我的订单"></lang>
						</view>
					</view>
					<view class="my_detail clearfix">
						<block v-for="(item, index) in myPageInfo.order" :key="index">
							<view class="item" :style="'width:25%;' + ( index >= 4 ? 'margin-top:40rpx' : '')">
								<image class="wh25" :src="item.image"></image>
								<view>{{ item.title }}</view>
								<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.title">
									<button formType="submit" class="formidBtn"></button>
								</form>
							</view>
						</block>
					</view>
				</view>
				<view class="my_item bd-radius" v-if="myPageInfo.collection && myPageInfo.collection.length > 0">
					<view class="my_title tjt-cells rel">
						<view>
							<lang keywords="收藏关注"></lang>
						</view>
					</view>
					<view class="my_detail clearfix" style="display:block;margin-top:0px">
						<view class="flex item" style="align-items: baseline;color:#5f5f5f;margin-top:0px ">
							<block v-for="(item, idx) in myPageInfo.collection" :key="idx">
								<view class="myActiveItem">
									<text class="shoucang" :style="'color:' + (idx==0?'#3F9CFF':idx==1?'#FF5E5E':idx==2?'#A378FF':'#FFBA2A')">{{item.count}}</text>
									<view>{{ item.title }}</view>
									<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.title">
										<button formType="submit" class="formidBtn"></button>
									</form>
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="my_item bd-radius" v-if="myPageInfo.discount && myPageInfo.discount.length>0">
					<view class="my_title tjt-cells rel">
						<view>
							<lang keywords="我的卡券"></lang>
						</view>
					</view>
					<view class="my_detail clearfix" style="display:block;">
						<view class="flex" style="font-size:28rpx;align-items: baseline;color:#5f5f5f ">
							<block v-for="(item, myPageInfo_discount) in myPageInfo.discount" :key="myPageInfo_discount">
								<block v-if="myPageInfo.discount.length>=4">
									<view class="myCardItem">
										<image v-if="item.add_group" class="wh43" :src="item.pic_url" style="width:30px;height:30px"></image>
										<image v-else class="wh43" :src="item.pic_url"></image>
										<view>{{ item.title }}</view>
										<view style="font-weight:normal;color:#666">
											<lang keywords="共"></lang><text style="color:red;">{{item.number}}</text>
											<lang keywords="张"></lang>
										</view>
										<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.title">
											<button formType="submit" class="formidBtn"></button>
										</form>
									</view>
								</block>
								<block v-else>
									<view class="flex1">
										<image class="wh43" :src="item.pic_url"></image>
										<view>{{ item.title }}</view>
										<view style="font-weight:normal;color:#666">共<text style="color:red">{{ item.number }}</text>张</view>
										<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.title">
											<button formType="submit" class="formidBtn"></button>
										</form>
									</view>
								</block>
							</block>
						</view>
					</view>
				</view>
				<view class="my_item bd-radius" style="padding-bottom:0px;margin-bottom:0px" v-if="myPageInfo.release &&  myPageInfo.release.length>0">
					<view class="weui-cells no-border-t no-border-b">
						<block v-for="(item, idx) in myPageInfo.release" :key="idx">
							<view :class="'weui-cell weui-cell_access  ' + (idx==0?'no-border-t':'') + '  ' + (idx==myPageInfo.release.length-1?'':'no-border-b') + '  '">
								<view class="weui-cell__hd">
									<image class :src="item.image"></image>
								</view>
								<view class="weui-cell__bd weui-cell_primary">
									<view>{{ item.title }}</view>
								</view>
								<text class="weui-cell__ft"></text>
								<form :report-submit="true" class="formidForm" @submit="( item.phone? goPhone($event) : goUrl($event) )" :data-phone="(item.phone?item.phone:'')"
								 :data-url="item.url" :data-url_title="item.title">
									<button formType="submit" class="formidBtn"></button>
								</form>
							</view>
						</block>
					</view>
				</view>

			</view>
			<!-- 店铺联系方式弹窗 -->
			<view class="mask contact-box" :hidden="!showCallBox">
				<view class="detail">
					<button class="item" @tap="callPhone($event)" v-for="(item, index) in phoneList" :key="index" :data-phone="item">
						<text class="iconfont icon-dianhua"></text>
						<text>{{item}}</text>
					</button>
					<button v-if="phoneUrl!=''" :class="'item  ' + (phoneUrl==''?'active':'')" @click.stop="phoneUrl=='' ? '': goUrl($event) " :data-url="(phoneUrl==''?'':phoneUrl)"
					 data-url_title="在线客服">
						<text class="iconfont icon-weixin1"></text>
						<lang v-if="phoneUrl==''" keywords="暂未开通在线客服"></lang>
						<lang v-else keywords="在线客服"></lang>
					</button>

					<text class="iconfont icon-cha" @click.stop="closeMask"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import common from '../../utils/common.js'
	var _this;

	export default {
		data() {
			return {
				text: '',
				marquee2_margin: 60,
				marqueeDistance2: 0,
				marqueePace: 1,
				//滚动速度
				marquee2copy_status: false,
				orientation: 'left',
				//滚动方向
				size: 14,
				userInfo: {},
				showCallBox: false,
				myPageInfo: {},
				phoneList: [],
				phoneUrl: '',
				hidden: 'auto',
				systemInfo: '',
				mobile_head_color: '',
				tabbar: {},
				user_options: {},
				windowWidth: 0,
				textLength: ''
			};
		},

		onUnload: function() {
			// 页面关闭
			this.closeMask();
			clearInterval(this.interval);
		},
		onHide: function() {
			// 页面隐藏
			this.closeMask();
			clearInterval(this.interval);
		},

		onShow() {
			common.editTabbar();
			clearInterval(this.interval);
			app.checkIsHome('/' + _this.route); // wx.showTabBar();

			var redirect = wx.getStorageSync('my_redirect_type');

			if (redirect) {
				wx.removeStorage({
					key: 'my_redirect_type'
				});
				var pay_order_id = wx.getStorageSync('pay_order_id');

				if (redirect == 'store') {
					this.store_order();
				} else if (redirect == 'group') {
					this.group_order();
				} else if (redirect == 'shop') { // this.shop_order();
				} else if (redirect == 'foodshop') {
					if (pay_order_id) {
						this.foodshop_order_detail(pay_order_id);
					} else {
						this.foodshop_order();
					}
				} else if (redirect == 'mall') {
					var url = wx.getStorageSync('mall_order_detail');
					wx.removeStorage({key: 'mall_order_detail'});
					common.parseUrl(url);
				}
				console.log('个人信息111', app.globalData.userInfo)
				// app.globalData.userInfo = null;
			}
			
			console.log('个人信息333', app.globalData.userInfo)
			
			if (!app.globalData.userInfo) {
				//调用应用实例的方法获取全局数据
				_this.user_options = {
					toLogin: true,
					content: common.changeTxt('未获取到您的头像、昵称等信息，当前页面无法展示，将回到首页'),
					url: '/pages/plat_menu/index?no_auth=1',
					goType: 'tab'
				}
			} else {
				this.userInfo = app.globalData.userInfo
				this.getMyPageInfo();
			}
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},

		onLoad: function() {
			_this = this;
			console.log('个人中心' + app.globalData.door_share_id);
			wx.setNavigationBarTitle({
				title: common.changeTxt('个人中心')
			});
			_this.systemInfo = app.globalData.systemInfo;

			common.setMainColor(_this);
			app.homeIsRedirect();
		},
		components: {
			
		},
		methods: {
			go_newnumber: function(e) {
				console.log(e);

				if (e.type == 'submit') {
					common.upFormid(e);
				}

				wx.navigateTo({
					url: "newnumber"
				});
			},
			goUrl: function(e) {
				console.log(e);

				if (e.type == 'submit') {
					common.upFormid(e);
				}

				clearInterval(this.interval);
				var pageTitle = e.currentTarget.dataset.url_title;

				if (!pageTitle) {
					pageTitle = '';
				}

				console.log('666666666666');
				common.parseUrl(e.currentTarget.dataset.url, '', false, common.changeTxt(pageTitle));
			},
			goPhone: function(e) {
				console.log(e);

				if (e.type == 'submit') {
					common.upFormid(e);
				}

				var phone = this.myPageInfo.kefu.phone != null && this.myPageInfo.kefu.phone.length > 0 ? this.myPageInfo.kefu.phone :
					[];
				var url = this.myPageInfo.kefu.url && this.myPageInfo.kefu.url != null ? this.myPageInfo.kefu.url : "";

				if (phone.length == 0 && url == '') {} else {
					if (phone.length == 0) {
						clearInterval(this.interval);
						common.parseUrl(url, '', false, '在线客服');
					} else {
						this.showCallBox = true
						this.phoneList = phone
						this.phoneUrl = url
					}
				}
			},
			callPhone: function(e) {
				var tel = e.currentTarget.dataset.phone;
				wx.makePhoneCall({
					phoneNumber: tel
				});
				this.showCallBox = false
			},
			closeMask: function() {
				this.showCallBox = false
			},
			shop_order: function() {
				//wx.navigateTo({url:"shop_order"});
				clearInterval(this.interval);
				common.parseUrl('url/My/shop_order_list', '', false, common.changeTxt('快店订单'));
			},
			group_order: function() {
				clearInterval(this.interval);
				common.parseUrl('url/My/group_order_list', '', false, common.changeTxt('团购订单'));
			},
			store_order: function() {
				clearInterval(this.interval);
				common.parseUrl('url/My/store_order_list', '', false, common.changeTxt('到店付订单'));
			},
			foodshop_order: function() {
				clearInterval(this.interval);
				common.parseUrl('url/My/foodshop_order_list', '', false, common.changeTxt('餐饮订单'));
			},
			foodshop_order_detail: function(order_id) {
				common.parseUrl('url/Foodshop/book_success&order_id=' + order_id, '', false, common.changeTxt('餐饮订单'));
			},
			go_myinfo: function() {
				clearInterval(this.interval);
				wx.navigateTo({
					url: "myinfo"
				});
			},
			go_mymoney: function() {
				clearInterval(this.interval);
				wx.navigateTo({
					url: "my_money"
				});
			},

			getMyPageInfo() {
				clearInterval(this.interval);
				common.post('My&a=my_new', {
					noTip: this.myPageInfo.user ? true : false
				}, "setMyPageInfo", this);
			},

			setMyPageInfo(result) {
				var that = this;

				if (result.discount && result.discount != null && result.discount.length > 0) {
					for (var i = 0; i < result.discount.length; i++) {
						if (result.discount[i].pic_url.indexOf("add_group") != -1) {
							result.discount[i].add_group = true;
						} else {
							result.discount[i].add_group = false;
						}
					}
				} else {
					result.discount = [];
				}

				var userInfo = this.userInfo;

				// if (result.user.phone) {
					userInfo.phone = result.user.phone;
					userInfo.showPhone = result.user.phone_s;
					app.globalData.userInfo = userInfo
				// }

				this.userInfo = userInfo
				this.myPageInfo = result
				var windowWidth = _this.systemInfo.windowWidth; // 屏幕宽度

				var text = '';

				if (result.scroll_msg && result.scroll_msg.length > 0) {
					for (var i = 0; i < result.scroll_msg.length; i++) {
						text += result.scroll_msg[i] + '     ';
					}
				}

				that.text = text
				//var length = text.length * this.size;//文字长度

				if (text != '') {
					that.getTextWidth()
				}

				wx.hideToast();
			},
			
			getTextWidth () {
				var query = wx.createSelectorQuery();
					
				query.select('.every').boundingClientRect(function(rect) {
					var windowWidth = _this.systemInfo.windowWidth; // 屏幕宽度
					if (rect) {
						var length = rect.width;
						_this.textLength = rect.width
					} else {
						setTimeout(function(){
							_this.getTextWidth()
						}, 1000)
						return
					}
					_this.windowWidth = windowWidth
					_this.hidden = 'hidden'
					_this.marquee2_margin = length < windowWidth ? (windowWidth - length) : _this.marquee2_margin //当文字长度小于屏幕长度时，需要增加补白
					_this.run2();
				}).exec();
			},

			run2: function() {
				var _this = this;
				var interval = this.interval = setInterval(function() {
					if (-_this.marqueeDistance2 < _this.textLength) {
						// 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示
						_this.marqueeDistance2 = _this.marqueeDistance2 - _this.marqueePace
					} else {
						clearInterval(interval);
						_this.marqueeDistance2 = _this.windowWidth
						_this.run2();
					}
				}, 30);
			},

			getUserInfo(e) {
				if (e.detail.userInfo) {
					_this.userInfo = e.detail.userInfo

					console.log('that.data.userInfo', _this.userInfo);

					_this.getMyPageInfo();
				}
			}
		}
	};
</script>
<style>
	@import "./index.css";
	.container{
		padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
		overflow-x: hidden;
	}
</style>
